<template>
  <div class="user_manager">
     <!-- <div style="height:70px;width:100%;position:fixed;z-index:1;background:#f9f9f9;margin-top: -68px;display:flex;align-item:center;margin-left: -25px;" class="fin_header">
      <span>团队管理</span>
    </div> -->
    <div class="header">
      <div class="header_span">
        <cell-header :title="`团队管理`" :type="1"/>
      </div>
    </div>

    <!-- 修改备注 -->
    <el-dialog title="修改备注" :visible.sync="editBZVisible" :append-to-body="true" width="600px">
      <el-form label-position="top" ref="zbForm" :model="zbForm" label-width="80px" size="small" :rules="rules">
        <el-form-item label="备注">
          <el-input v-model="zbForm.bz" placeholder="请输入你的新备注" maxlength="20" show-word-limit size="small" style="width:480px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="editBZVisible = false" size="small" class="cancel-btn">取 消</el-button>
          <el-button type="success" @click="editbz('zbForm')" size="small">保存</el-button>
      </span>
    </el-dialog>
    <!-- 邀请用户 -->
    <el-dialog title="邀请用户" :visible.sync="inviteUserVisible" :append-to-body="true" width="600px" :show-close="!inviteLoading">
      <template>
        <auth ref="auth-box" v-loading="inviteLoading" :invite-hidd="inviteHidd" :element-loading-text="inviteLoadTxt"></auth>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" :disabled="inviteLoading" @click="inviteUserVisible = false" class="cancel-btn">取 消</el-button>
          <el-button size="small" type="success" :disabled="inviteLoading" @click="hanglePermission">邀请</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑权限 -->
    <el-dialog title="编辑权限" :visible.sync="EditUserVisible" :append-to-body="true" width="800px" :show-close="!editLoading">
      <auth ref="edit-box" v-loading="editLoading" :permissionInfo="permissionInfo" :element-loading-text="editLoadTxt"></auth>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" :disabled="editLoading" @click="EditUserVisible = false" class="cancel-btn">取 消</el-button>
        <el-button size="small" type="success" :disabled="editLoading" @click="handleSugEdit">保存</el-button>
      </span>
    </el-dialog>
    <!-- 操作日志 -->
    <el-dialog :title="`操作日志（${userId}，${userName}）`" :visible.sync="LogoVisible" :append-to-body="true" width="880px">
       <div style="margin-top:-10px;"><OperationLog :user-id="userId" :user-role-name="userRoleName"></OperationLog></div>
    </el-dialog>
    <!-- 解散团队 -->
    <el-dialog title="解散团队" :append-to-body="true" :visible.sync="dismissTeamVisible" width="600px">
      <dismissTeam :isRemoveAllTeam2="isRemoveAllTeam2" :isRemoveAllTeam1="isRemoveAllTeam1" @close="close"></dismissTeam>
    </el-dialog>
    <!-- 移交管理员 -->
    <el-dialog title="移交管理员" :append-to-body="true" :visible.sync="MangerVisible" width="600px">
      <dismissTeam :isRemoveAllTeam="isRemoveAllTeam" :lowerUserList="lowerUserList"  @close="close"></dismissTeam>
    </el-dialog>
    <!-- 权限明细 -->
    <el-dialog title="权限明细" :visible.sync="authDetailVisible" :append-to-body="true" width="800px">
      <authorization :userRoleName="userRoleName"></authorization>
    </el-dialog>
    <!-- <div style="position:relative;margin-top: 40px;"> -->
    <div style="position: relative;top: 40px;overflow:hidden;">
    <el-card shadow="never" style="margin-bottom: 29px; width: 100%; overflow:hidden;" class="card_height">
      <div class="user_header" v-if="roleName === 'visitor'">
        <div @mouseenter="showText=true" @mouseleave="showText=false" style="width:38px;height:38px;margin-top:7px;">
          <el-upload
            class="avatar-uploader"
            :limit="1"
            :show-file-list="false"
            :before-upload="uploadSectionFile"
            :on-success="handleAvatarSuccess"
          >
            <div v-show="showText" class="cover"></div>
            <label v-show="showText" class="upload_text">上传</label>
            <img v-if="imgUpload" :src="imgUpload" class="avatar">
            <img v-else :src="circleUrl" class="avatar">
            </el-upload>
          </div>
          <div class="span_text"><span v-show="isShowText"  @click="isShowEditText">{{teamName}}</span></div>
          <el-input ref="inputName" v-model="teamNames" size="small" maxlength="20" show-word-limit v-show="isShowIput" @blur="editTeamName" @keyup.enter.native="editTeamName" @input="changeValue" style="width:380px;margin-top:11px;margin-left:0px;"></el-input>
        <div class="button_right" v-if="lowerUserList.length < 21"><el-button v-if="userInfo.roleName==='admin'||userInfo.roleName==='visitor'" type="success" size="small" @click="inviteUserVisible=true">邀请用户</el-button></div>
      </div>
      <div class="user_header" v-else>
        <div @mouseenter="showText=true" @mouseleave="showText=false" style="width:38px;height:38px;margin-top:8px;">
            <img v-if="imgUpload" :src="imgUpload" class="avatar">
            <img v-else :src="circleUrl" class="avatar">
          </div>
            <div class="span_text_no"><span>{{teamName}}</span></div>
      </div>
      <el-table :data="lowerUserList"  style="overflow:hidden" :v-loading="tableLoding">
        <el-table-column prop="userId" label="ID" ></el-table-column>
        <el-table-column label="姓名"  width="320px">
          <template slot-scope="scope">
            <span v-if="scope.row.nickName">
              {{scope.row.nickName}}
            </span>
            <span v-else> -</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="">

        </el-table-column> -->
        <el-table-column label="权限与角色" width="160px">
          <template slot-scope="scope">
            <span v-if="scope.row.roleName === 'visitor'">团队管理员</span>
            <span v-else-if="scope.row.roleName === 'manager'">系列组管理员</span>
            <span v-else-if="scope.row.roleName === 'finance'">账号财务</span>
            <span v-else-if="scope.row.roleName === 'readOnly'">广告只读</span>
            <span v-else-if="scope.row.roleName === 'advManager'">广告管理员</span>
            <span v-else>系列组只读</span>
          </template>
        </el-table-column>
        <el-table-column label="手机" width="160px">
          <template slot-scope="scope">
            <span v-if="scope.row.mobile">{{scope.row.mobile}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
         <el-table-column label="备注" width="340px">
          <template slot-scope="scope">
            <span v-if="scope.row.remarks">{{scope.row.remarks}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#24BEBE"
              :active-value="0"
              :inactive-value="1"
              @change="(status)=>{
                handlerChangeStatus(status,scope.row)
              }"
            ></el-switch>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="320">
          <template slot-scope="scope">
            <div style="display:flex;" v-if="scope.row.roleName === 'visitor' && roleName === 'visitor'">
              <em class="opration" @click="authDetail(scope.row.roleName)">权限明细</em>
              <em class="opration" @click="openLog(scope.row)">操作日志</em>
              <em  class="opration" v-if="lowerUserList.length > 1" @click="dismissTeamVisibleTip('manager')">移交管理员</em>
              <span v-else class="remove_manager opration">移交管理员</span>
              <em class="opration" @click="dismissTeamVisibleTip('team')">解散团队</em>
            </div>
            <div v-else style="display:flex;">
              <em class="opration" v-if="roleName === 'visitor'" @click="editBZDialog(scope.row)">修改备注</em>
              <em class="opration" v-if="roleName === 'visitor'" @click="editPermission(scope.row)">编辑权限</em>
              <em class="opration" v-if="scope.row.userId === userInfo.userId" @click="authDetail(scope.row.roleName)">权限明细</em>
              <em class="opration" v-if="scope.row.userId === userInfo.userId || roleName === 'visitor'" @click="openLog(scope.row)">操作日志</em>
              <em class="opration" v-if="scope.row.userId === userInfo.userId" @click="logOutTeam(scope.row)">退出团队</em>
              <em class="opration" v-if="roleName === 'visitor'" @click="remove(scope.row)">移除</em>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    </div>
  </div>
</template>

<script>
import cellHeader from '@/components/cell-header.vue'
import {
  getDefultPath
} from '@/utils/index.js'
import {
  resetRouter
} from '@/router'
import {
  asyncRoutes
} from '@/router'
import auth from './auth.vue'
import axios from 'axios'
import {
  getToken
} from '@/utils/auth'
import OperationLog from '../personal/operationLog.vue'
import authorization from '../personal/permisson.vue'
import dismissTeam from './dismissTeam.vue'
import {
  msgAdd,
  userManagerFindUser,
  managerModify,
  managerRemove

} from '@/api/user.js'
import {editTeamInfo, getTeamList,inviteInfoTeam,getTeamInfo,removeInvite,editPer,removeTeam, isRemoveTeam, editbz} from '@/api/team.js'
export default {
  name: 'UserManger',
  components: {
    cellHeader,
    OperationLog,
    auth,
    authorization,
    dismissTeam
  },
  data() {
    return {
      rules:{
        bz: [
        { required: true, message: '请输入备注', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在1到20个字符', trigger: 'change' }
        ],
    },
      isRemoveAllTeam1: '',
      isRemoveAllTeam2: '',
      isRemoveAllTeam: '',
      isShowText: true,
      showText: false,
      imageUrl: require('@/assets/images/invite_log.png'),
      circleUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      imgUpload: '',
      permissionInfo: {}, // 点击编辑权限按钮列的权限明细
      inviteLoading: false,
      inviteLoadTxt: '数据提交中',
      inviteUserVisible: false,
      EditUserVisible: false,
      editLoading: false,
      editLoadTxt: '数据提交中',
      LogoVisible: false,
      removeUserVisible: false,
      dismissTeamVisible: false,
      authDetailVisible: false,
      MangerVisible: false,
      editBZVisible: false,
      inviteHidd: true,
      tableLoding: false,
      lowerUserList: [],
      userId: '',
      userName: '',
      userRoleName: '',
      isShowIput: false,
      eidtValueStatus: false,
      teamNames: '',
      zbForm: {
        bz: ''
      }
    }
  },
  computed: {
    isUrl() {
      return process.env.VUE_APP_BASE_API + 'fdfs/upload'
      // return 'http://cloud.3ydata.com/fdfs/upload'
    },
    userInfo() {
      return this.$store.state.user.userInfo
    },
    inviteIs() {
      return this.$store.state.user.isInvite
    },
    roleName() {
      // return window.localStorage.getItem('roleName') ? window.localStorage.getItem('roleName') : 'visitor'
      return this.$store.state.user.userInfo.roleName
    },
    teamId() {
      return this.$store.state.team.teamId
    },
    teamName() {
      this.teamNames = this.$store.state.team.teamName
       return this.$store.state.team.teamName
    },
    unit() {
      return this.$store.state.user.unit
    },
    nickName() {
      return this.$store.state.user.userInfo.nickName
    }
  },
  watch: {
    userId(val, old) {
      this.userId = val
    },
    inviteIs: {
      handler(newV){
        if(newV === 1 || newV === 2)
        this.getTeamOnInfo()
      }
    },
    nickName(val, old) {
      this.getTeamOnInfo()
    }
  },
  mounted() {
    this.getTeamOnInfo()
  },
  methods: {
    // 修改备注
    editBZDialog(data) {
      this.editBZVisible = true
      this.userId = data.userId
      this.zbForm.bz = data.remarks
    },
    editbz(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let data = {
            remarks: this.zbForm.bz,
            teamId: this.teamId,
            userId: this.userId
          }
          const res = await editbz(data)
          if(res.data.code === 20000) {
            this.editBZVisible = false
            this.$message.success(res.data.message)
            this.getTeamOnInfo()
          } else {
             this.$message.error(res.data.message)
          }
        }
      })
    },
    // 权限明细
    authDetail(data) {
      this.authDetailVisible = true
      this.userRoleName = data
    },
    close(data){
      this.MangerVisible = data
      this.dismissTeamVisible = data
    },
    // 解散团队之前条件判断
    async dismissTeamVisibleTip(params) {
      this.$message.closeAll()
      if(!this.$store.state.user.userInfo.mobile) return this.$message.error('请前往账号设置绑定手机号')
      let data = {
        teamId: this.teamId,
        currencyType: this.$store.state.user.unit
      }
      const res = await isRemoveTeam(data)
      if (res.data.code === 20000) {
        if (res.data.data.falg1) {
          this.isRemoveAllTeam1 = true
        } else {
          this.isRemoveAllTeam1 = false
        }
        if (res.data.data.falg2) {
          this.isRemoveAllTeam2 = true
        } else {
          this.isRemoveAllTeam2 = false
        }
      }
      if (params === 'manager') {
        this.isRemoveAllTeam= true
        this.MangerVisible = true
      } else {
        this.isRemoveAllTeam = false
        this.dismissTeamVisible = true
      }
    },
    // 获取某个团队列表
    async getTeamOnInfo() {
      let data = {
        teamId: this.teamId
      }
      const res = await getTeamInfo(data)
      if (res.data.code === 20000) {
        this.lowerUserList = res.data.data
        this.lowerUserList.forEach(item => {
          if (item.roleName === 'visitor') {
            this.imgUpload = item.teamImg
            this.teamId = item.teamId
            this.teamName = item.teamName
            window.localStorage.setItem('team-data', item.teamId)
            this.$store.commit('team/SET_TEAMDATA', item)
            this.$store.commit('team/SET_TEAMID', item.teamId)
            this.$store.commit('team/SET_TEAMNAME', item.teamName)
          }
        })
      }
    },
    // 获取缓存的team数据
    getTeamDataLoal() {
      let data = window.localStorage.getItem('team-data')
      let teamId = this.$store.state.team.teamId
      this.teamId = data || teamId
      this.teamName = data.teamName

    },
    // 输入框
    changeValue(value) {
      if(value) {
        this.eidtValueStatus = true
      }
    },
    // 修改团队名称
    isShowEditText() {
      this.isShowIput = true
      this.isShowText = false
      this.$nextTick(() => {
        this.$refs.inputName.focus()
      })
    },
    isHideEditText() {
      this.isShowIput = false
      this.isShowText = true
    },
    // 图像上传
    handleAvatarSuccess(res, file) {
      this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
    },
    uploadSectionFile(file) {
      let type = file.type
      const isJPG = (type === 'image/jpeg') || (type === 'image/jpg') || (type === 'image/png')
      const isLt5k = file.size / 1024/1024  < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG、JPEG、PNG 格式!');
      } else if (!isLt5k) {
        this.$message.error('上传头像图片大小不能超过2MB!');
      } else {
        let fileContent = file
        let formData = new FormData()
        formData.append('uploadFile',fileContent)
        let config = {
        headers: {
          "Content-Type": "multipart/form-data" ,
           "Authorization": getToken()
        },
        methods: 'post'
      }
      axios.post(this.isUrl, formData, config, {timeout: 6000}).then(res => {
        if(res.data.code === 20000) {
         let params = {
            teamImg: res.data.data,
            teamId: this.teamId
          }
         this.editImage(params)
        } else  {
          this.$message.error(res.data.message || '上传图片失败')
        }
      })
      }
      return false
    },
    // 修改团队名称
    editTeamName() {
      let params = {
        teamName: this.teamNames,
        teamId: this.teamId
      }
       if(!this.eidtValueStatus) {
         this.isShowIput = false
         this.isShowText = true
         return false
       } else {
          if (!this.teamNames) return this.$message.error('团队名称不能为空')
          this.editImage(params)
       }
    },
    // 公共修改团队信息
    async editImage(params) {
      const res = await editTeamInfo(params)
      if (res.data.code === 20000) {
        this.$message.success(res.data.message)
        this.isShowIput = false
        this.isShowText = true
        this.eidtValueStatus = false
        this.getTeamOnInfo()
      } else {
        this.$message.error(res.data.message)
      }
    },
    // 退出团队
    async logOutTeam(params) {
     const confirmResult = await this.$confirm('退出后将失去在该团队的相关权限', '温馨提示', {
        confirmButtonText: '退出',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel-btn',
        // type: 'warning'
      }).catch(err => err)
      if(confirmResult !== 'confirm') return this.$message.info('已取消退出')
      let data ={
        teamId: params.teamId,
        teamName: params.teamName
      }
      const res = await removeTeam(data)
      if (res.data.code === 20000) {
        this.$message.success(res.data.message || '退出团队成功')
        setTimeout(()=> {
          window.localStorage.setItem('team-data', '')
          this.$store.commit('team/SET_TEAMDATA', '')
          this.$store.commit('team/SET_TEAMID', '')
          this.$store.commit('user/SET_INVITE', 1)
          this.$store.commit('team/SET_ISTEAM', true)
          asyncRoutes[2].children[2].hidden = true
        }, 500)
      } else return this.$message.error(res.data.message || '退出团队失败')
    },
    // 移除
    remove(row) {
      let nickName = row.nickName ? row.nickName : '-'
      this.$confirm(`确定要移除  ${nickName}  ? 一旦移除将无法查看其操作日志。`, '温馨提示', {
        confirmButtonText: '移除',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel-btn',
        // type: 'warning',
        left: true
      }).then(() => {
        this.managerRemove(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消移除'
        })
      })
    },
    async managerRemove(data) {
      const res = await removeInvite({
        teamId: data.teamId,
        userId: data.userId,
        teamName: this.teamName
      })
      if (res.data.code === 20000) {
        this.$message({
          showClose: true,
          message: '移除成功',
          type: 'success'
        })
        this.$store.commit('team/SET_ISTEAM', true)
        this.getTeamOnInfo()
      }
    },

    // 查找下级用户列表
    async userManagerFindUser() {
      this.tableLoding = true
      const res = await userManagerFindUser()
      this.tableLoding = false
      if (res.data.code === 20000) {
        const arr = res.data.data.map(item => {
          item.roleName = item.des
          return item
        })
        this.lowerUserList = arr
      } else {
        this.lowerUserList = []
      }
      return false
    },
    // 整理广告系列数据
    tidyCa(data) {
      let obj = {
        default: [],
        secretKeys: {}
      }
      let str = []
      data.forEach(item => {
        const key = item[0]
        if (key === 'default') {
          obj.default.push(item[2])
        } else {
          let strs = item[0]
          str.push(item[1])
          obj.secretKeys[strs] = str
        }
      })
      return obj
    },

    // 点击了邀请用户权限的邀请按钮
    async hanglePermission() {
      this.inviteLoadTxt = '数据验证中'
      this.inviteLoading = true
      this.$refs['auth-box'].handleSubmit().then((res) => {
        this.inviteLoadTxt = '数据提交中'
        let obj = {}
        const {
          receiveRole,
          receiveUserId,
          sendUserId,
          sendUserName,
          roleId,
          remarks
        } = res
        obj = {
          receiveRole,
          receiveUserId,
          sendUserId,
          sendUserName,
          roleId,
          remarks,
          teamId: this.teamId
        }
        this.$store.commit('team/SET_TEAMID',this.teamId)
        if (receiveRole === 'manager') {
          if (res.managerMap.length > 0) {
           obj.map = this.tidyCa(res.managerMap)
          } else {
            this.inviteLoading = false
            this.$message.closeAll()
            this.$message.error('请选择广告系列组')
            return false
          }
        }

        if (receiveRole === 'campaignsReadOnly') {
          if (res.readOnlyMap.length > 0) {
            obj.map = this.tidyCa(res.readOnlyMap)
          } else {
            this.inviteLoading = false
            this.$message.closeAll()
            this.$message.error('请选择广告系列组')
            return false
          }
        }

        this.inviteLoadTxt = '邀请发送中'
        this.handlerInvite(obj)
      }).catch(err => {
        this.inviteLoadTxt = '数据验证失败'
        this.inviteLoading = false
        this.$forceUpdate()
      })
    },

    // 邀请下级用户
    async handlerInvite(data) {
      let params = {
        ...data,
        teamName: this.teamName
      }
      try {
        const res = await inviteInfoTeam(params)
        this.$message.closeAll()
        if (res.data.code === 20000) {
          this.$message({
            showClose: true,
            message: '发送邀请成功',
            type: 'success'
          })
        } else if (res.data.code === 20013) {
          this.$message.info('请等待用户接受邀请')
        } else if (res.data.code === 20014) {
          this.$message.info('无此用户')
        } else {
          this.$message.error(res.data.message || '邀请失败')
        }
      } catch (err) {
      } finally {
        this.inviteLoading = false
        this.$refs['auth-box'].clear()
        this.$nextTick(() => {
          this.inviteUserVisible = false
        })
      }
    },

    // 点击了编辑权限
    editPermission(row) {
      this.permissionInfo = JSON.parse(JSON.stringify(row))
      this.EditUserVisible = true
    },

    // 点击编辑权限弹窗的保存按钮
    async handleSugEdit() {
      this.editLoading = true
      this.editLoadTxt = '数据验证中'
      try {
        const res = await this.$refs['edit-box'].handleSubmit()
        // if (res.receiveRole === this.permissionInfo.roleName) return
        let obj = {}
        const {
          receiveRole,
          receiveUserId,
          sendUserId,
          sendUserName,
          roleId
        } = res
        obj = {
          receiveRole,
          receiveUserId,
          sendUserId,
          sendUserName,
          roleId,
          id: this.permissionInfo.id,
          teamId: this.teamId
        }

        if (receiveRole === 'manager') {
          obj.campaignsList = JSON.stringify(this.tidyCa(res.managerMap))
        }

        if (receiveRole === 'campaignsReadOnly') {
          obj.campaignsList = JSON.stringify(this.tidyCa(res.readOnlyMap))
        }
        this.editPer(obj)
      } catch (error) {
        this.editLoading = false
      } finally {
        this.editLoading = false
        this.EditUserVisible = false
      }
    },

    // 修改状态
    handlerChangeStatus(status, row) {
      const obj = {
        status,
        id: row.id
      }
      this.editPer(obj)
    },

    async editPer(data) {
      try {
        const res = await editPer(data)
        this.$message.closeAll()
        if (res.data.code === 20000) {
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          })
          this.getTeamOnInfo()
        } else {
          this.$message.error(res.data.message)
        }
      } catch (error) {

      } finally {
        if (this.$refs['edit-box'] && this.$refs['edit-box'].clear()) {
          this.$refs['edit-box'].clear()
        }

        this.$nextTick(() => {
          this.editLoading = false
          this.EditUserVisible = false
        })
      }
    },

    // 点击了操作日志按钮
    openLog(row) {
      this.LogoVisible = true
      this.userId = row.userId
      this.userName = row.nickName ? row.nickName : '-'
      this.userRoleName = row.roleName
    }

  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
div /deep/ .el-input .el-input__count .el-input__count-inner {
  margin-top: 5px;
}
.header {
  width: 100%;
  height: 70px;
  position: fixed;
  // left: 0;
  margin-top: -25.7px;
  z-index: 99;
  background: #f9f9f9;
  .header_span {
    position: absolute;
    margin-top: 24px;
    // margin-left: 105px;
  }
}
.card_height {
  min-height: calc(100vh - 165px);

}
 .user_header {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 60px;
   margin-bottom: 12px;
    img{
      width: 38px;
      height: 38px;
      border-radius: 2px;
    }
   .upload_text{
    color:white;
    position: absolute;
    // top: 165px;
    // margin-left: -32px;
    // left: 10px;
    margin-top: 12px;
    margin-left: 7px;
    font-size: 10px;
    z-index: 999;
    // width: 38px;
    // height:38px;
  }
  .cover{
    // background-image: url('../../../assets/images/cover.png');
    // background-size:cover;
    // -moz-background-size:cover; /* 老版本的 Firefox */
    // background-repeat:no-repeat;
    width: 38px;
    height: 38px;
    border-radius: 2px;
    position: absolute;
    // margin-top: -40px;
    margin-top: 0px;
    background-color: black;
    opacity: 0.5;
    border: 1px solid #39444E;
    }
    .button_right{
      position:absolute;
      right: 25px;
      margin-top: 10px;
    }
    .span_text {
      margin-top: 17px;
      margin-left: 10px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      border-radius: 2px;

    }
    .span_text_no {
      margin-top: 17px;
      margin-left: 10px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      border-radius: 2px;
    }
    .span_text:hover {
      border: 1px solid #E0E2E7;
      height: 35px;
      cursor: pointer;
      position: absolute;
      margin-left: 50px;
      margin-top: 10px;
      span{
        position: relative;
        top: 8px;
        padding: 6px 8px;
      }
    }
  }
  .opration {
    margin-right: 12px;
    cursor: pointer;
    // position:absolute;
    // right: 0;
  }

  // .el-form-item {
  //   margin-bottom: 0px;
  // }
  .opera_logo {
    display: flex;
    flex-direction: row;
    width: 100%;

    span {
      position: relative;
      right: 10px;
      top: 5px;
    }

    .chooseTime {
      position: absolute;
      right: 20px;
    }
  }
  .remove_manager {
    // color: $mainColor1;
    // opacity: 0.6;
    color: $disabledColor;
  }
</style>
